<template>
	<view class="content">
		<view class="status_bar">
		 </view>
		<uni-nav-bar left-icon="arrowleft"   title="升级会员" right-text="充值明细" @clickLeft="back()" @clickRight="detail()"></uni-nav-bar>
		
		<view class="vip">
			<view :class="item.id == active ?'vip_item1':'vip_item'"  v-for="(item,index) in list1" :key="index" @click="sel(item.id,item.money)">
				<view class="vip_l">
					<view class="jinbi iconfont icon-tubiao207"></view>
					<view class="vip_money">￥{{item.money}}</view>
				</view>
				<view class="vip_r">
					<!-- <image :src="item.pic" mode=""></image> -->
					<image src="../../../static/vip.png" mode="" v-if="item.id !=4"></image>
					<image src="../../../static/vip1.png" mode="" v-else></image>
					<view class="vip_level">{{item.desc}}</view>
				</view>
			</view>
		</view>
		
		<view class="vip_info">
			<view class="">注：</view>
			<view class="">终身会员可享受全平台观看任意区直播，想看多久看多久、</view>
		</view>
		<view class="btn">
			<!-- <view class="btn_l" @click="shengji()">升级</view> -->
			<view class="btn_r" @click="chong()">充值</view>
		</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {	
		components: {uniNavBar},
		data() {
			return {
				active:1,
				list:[
					{id:1,price:30.00,name:'一个月VIP会员',pic:'../../../static/vip.png'},
					{id:2,price:80.00,name:'三个月VIP会员',pic:'../../../static/vip.png'},
					{id:3,price:150.00,name:'一年VIP会员',pic:'../../../static/vip.png'},
					{id:4,price:199.00,name:'终身VIP会员',pic:'../../../static/vip1.png'},
				],
				list1:[]
			}
		},
		onLoad() {
			this.jibie()
			
			// this.list1.id
			// this.list1.price
		},
		methods: {
			jibie(){
				//会员级别
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/vip',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						uni.hideLoading();
						console.log(res)
						if(res.data.code == 1){
							_this.list1 = res.data.data
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			shengji(){
				//会员级别
				uni.showLoading({
				    title: '升级中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {
					level:_this.active
				}
				console.log(_this.active)
				uni.request({
					url: getdata.websiteUrl + '/user/upgrade',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						uni.hideLoading();
						console.log(res)
						if(res.data.code == 1){
							getdata.shou(res.data.msg)
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			chong(){
				// uni.navigateTo({
				// 	url: '../money/money'
				// });
				uni.navigateTo({
					url: '../money/chongvip/chongvip?vip='+this.active
				});
			},
			sel(id,value){
				console.log(id,value)
				this.active = id
			},
			back(){
				uni.navigateBack();
		    },
			detail(){
				uni.navigateTo({
					url: 'vipdetail/vipdetail'
				});
		   },
		}
	}
</script>

<style lang="scss">
@import '../../../static/iconfont/iconfont.css';
.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }	
.uni-navbar--border{
	// border: none !important;
	border-bottom: 2rpx solid #F1F1F1;
}	
.uni-nav-bar-text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.vip{
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx;
	.vip_item{
		width: 100%;
		height: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #333333;
		display: flex;
		margin-top: 38rpx;
		.vip_l{
			width: 204rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-right: 2rpx solid #333333;
			text-align: center;
			.jinbi{
				color: #333333;
				font-size: 37rpx;
				line-height: 1;
				padding-top: 28rpx;
			}
			
			.vip_money{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 1;
				padding-top: 18rpx;
			}
		}
		.vip_r{
			flex: 1;
			height: 140rpx;
			text-align: center;
			image{
				width: 34rpx;
				height: 30rpx;
				margin: 32rpx auto 20rpx;
			}
			.vip_level{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 1;

			}
		}
	}
	
}
.vip_item:last-child{
	margin-top: 160rpx;
}
.vip_info{
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx;
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #333333;
	line-height: 1.5;
	margin-top: 70rpx;
}
.btn{
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx 75rpx;
	display: flex;
	// justify-content: space-between;
	justify-content: center;
	margin-top: 150rpx;
	.btn_l{
		width: 280rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #1578F2;
		border-radius: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		text-align: center;
	}
	.btn_r{
		width: 280rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #F2B115;
		border-radius: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		text-align: center;
	}
}
//选中时所需改变的样式
.vip_item1{
		width: 100%;
		height: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #F2154E;
		display: flex;
		margin-top: 38rpx;
		.vip_l{
			width: 204rpx;
			height: 140rpx;
			background: #1578F2;
			text-align: center;
			.jinbi{
				color: #FFFFFF;
				font-size: 37rpx;
				line-height: 1;
				padding-top: 28rpx;
			}
			
			.vip_money{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 1;
				padding-top: 18rpx;
			}
		}
		.vip_r{
			flex: 1;
			height: 140rpx;
			text-align: center;
			image{
				width: 34rpx;
				height: 30rpx;
				margin: 32rpx auto 20rpx;
			}
			.vip_level{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #1578F2;
				line-height: 1;

			}
		}
	}
	.vip_item1:last-child{
		margin-top: 160rpx;
	}
</style>
